{% extends "base.html" %}

{% block title %}{{ product['name'] }} - 农场{% endblock %}

{% block content %}
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="md:flex">
            <!-- 商品图片 -->
            <div class="md:w-1/2 p-4">
                <img src="{{ product['image_url'] }}" alt="{{ product['name'] }}" class="w-full h-auto rounded-md">
            </div>
            
            <!-- 商品信息 -->
            <div class="md:w-1/2 p-6">
                <h1 class="text-2xl font-bold mb-2">{{ product['name'] }}</h1>
                <div class="flex items-center mb-4">
                    <div class="flex text-yellow-400">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <span class="ml-2 text-gray-600">(120 评价)</span>
                </div>
                
                <div class="mb-4">
                    <span class="text-red-600 font-bold text-2xl">¥{{ "%.2f"|format(product['price']) }}</span>
                    {% if product['stock'] > 0 %}
                        <span class="ml-4 text-green-600"><i class="fa fa-check-circle"></i> 有货 (库存: {{ product['stock'] }})</span>
                    {% else %}
                        <span class="ml-4 text-red-600"><i class="fa fa-times-circle"></i> 无货</span>
                    {% endif %}
                </div>
                
                <div class="mb-6">
                    <h2 class="text-lg font-semibold mb-2">商品描述</h2>
                    <p class="text-gray-600">{{ product['description'] }}</p>
                </div>
                
                <div class="mb-6">
                    <h2 class="text-lg font-semibold mb-2">商品分类</h2>
                    <span class="bg-gray-200 text-gray-800 px-3 py-1 rounded-full text-sm">{{ product['category'] }}</span>
                </div>
                
                <!-- 加入购物车表单 -->
                <form action="{{ url_for('add_to_cart', product_id=product['id']) }}" method="post" class="flex items-center">
                    <div class="mr-4">
                        <label for="quantity" class="block text-gray-700 mb-1">数量</label>
                        <input type="number" id="quantity" name="quantity" value="1" min="1" max="{{ product['stock'] }}" 
                               class="w-20 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <button type="submit" class="btn-primary" {% if product['stock'] == 0 %}disabled{% endif %}>
                        <i class="fa fa-shopping-cart mr-2"></i> 加入购物车
                    </button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 商品详情 -->
    <div class="mt-8 bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-4">详细信息</h2>
        <div class="prose max-w-none">
            <p>这是{{ product['name'] }}的详细信息。我们提供优质的售后服务，所有商品均享受7天无理由退换。</p>
            <p>配送信息：下单后24小时内发货，全国包邮。</p>
            <p>保修信息：本产品享受1年官方保修服务。</p>
        </div>
    </div>
    
    <!-- 相关推荐 -->
    <div class="mt-8">
        <h2 class="text-2xl font-bold mb-6">相关推荐</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            {% for i in range(4) %}
                <div class="product-card">
                    <a href="#">
                        <img src="https://picsum.photos/id/{{ 30 + i }}/300/300" alt="相关商品 {{ i+1 }}" class="w-full h-48 object-cover">
                    </a>
                    <div class="p-4">
                        <h3 class="font-semibold text-lg mb-2">相关商品 {{ i+1 }}</h3>
                        <div class="flex justify-between items-center">
                            <span class="text-red-600 font-bold">¥{{ (100 + i*50) + (i*0.99) }}</span>
                            <button class="btn-primary py-1 px-3 text-sm">
                                <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                            </button>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}
